

import React, { FC, useEffect, useState } from 'react'
import axios from 'axios'
import { Button, Space, Swiper, Image } from 'antd-mobile'
import { useLocalStorageState } from 'ahooks'

import './index.scss'
import { baseURL } from '../../api/request'
import Dao from '../../components/Dao'
import { useComment, useGetYearWeek } from '../../hooks/common'


const Guide: FC<any> = () => {
    const { gotoWhere } = useComment()
    const [week] = useGetYearWeek()
    const [banners, setBanners] = useState<Array<any>>([])
    const [current, changeCurrent] = useState<number>(0)

    // 获取轮播图
    const getBannerData = async () => {
        let res = await axios.get('http://81.69.235.62:3000/app/banners')
        if (res.data.code == 200) {
            setBanners(res.data.result)
        }
    }
    useEffect(() => {
        getBannerData()
    }, [])

    // 限制广告页面 一周只允许进入一次
    const [localWeek, setLocalWeek] = useLocalStorageState('localWeek')
    useEffect(() => {
        if (localWeek) {
            if (localWeek == week) {
                gotoWhere('/main')
            } else {
                setLocalWeek(week)
            }
        } else {
            setLocalWeek(week)
        }
    }, [])

    return (
        <div className='guide'>
            <div className="swiperbox" style={{ padding: "50px 30px" }}>
                <Dao onEnd={() => { }} color="#000" style={{ zIndex: 10000 }} ></Dao>
                <Swiper onIndexChange={changeCurrent} >
                    {
                        banners.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <Image style={{ width: '100%', height: '500px' }} src={item.imgurl.replace(/public/, baseURL)} />
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>

                {
                    current == banners.length - 1 && <Button color='success' style={{ margin: "20px auto", display: 'flex', justifyContent: 'center' }}>开启日记之旅</Button>
                }

            </div>
        </div>
    )
}

export default Guide
